<template>
  <div class="user-bank-account">
    <div class="user-bank-account--header">
      <span class="title" :class="{en:$i18n.locale === 'en-US'}">{{ $t('all.autotext24') }}</span>
    </div>
    <a-dropdown
      placement="bottomCenter"
      v-if="!WXAuthorized &&  $options.filters.isPtsVisible() && tableList.length<1"
    >
      <a-button class="btn--header" type="primary">{{ $t('all.autotext409') }}</a-button>
      <a-menu slot="overlay">
        <a-menu-item>
          <a @click="handleAddBankAccount(1)">{{ $t('all.autotext283') }}</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="handleAddBankAccount(2)">{{ $t('all.autotext1750') }}</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <div class="user-bank-account__table">
      <s-table
        ref="table"
        size="default"
        :scroll="{ y: 300 }"
        :rowKey="record => record.id"
        :columns="UserBankTableColumns"
        :data="loadData"
        :show-pagination="false"
      >
        <span slot="id" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="bankType" slot-scope="text">{{ text | enumValueByKey($const.BANK_TYPE) }}</span>
        <span slot="action" slot-scope="text, record">
          <div class="table-action">
            <!-- <a
              :class="['mgr-10', defaultCard(record) && 'disabled']"
              v-single-click="(done) => setAsDefault(record, done)"
            >{{ $t('all.autotext159') }}</a>
            <a
              :class="['danger', defaultCard(record) && 'disabled']"
              v-single-click="done => deleteBankAccount(record, done)"
            >{{ $t('all.autotext379') }}</a> -->
            <a @click="handleAddBankAccount(record.bankType, record)">{{ $t('all.autotext919') }}</a>
          </div>
        </span>
      </s-table>
    </div>
    <AddAccountModal ref="backRef" @refresh="refreshTableData"></AddAccountModal>
  </div>
</template>

<script>
import { UserBankTableColumns } from '@views/account/settings/config/columns'
import { unreactive } from '@/utils/util'
import { apiGetResearchBankList } from '@api/account/settings'
import AddAccountModal from '@views/account/settings/components/AddAccountModal.vue'
import { apiSetResBankDefault, delBank } from '@api/account/user'
import { mapState } from 'vuex'

export default {
  name: 'UserBankAccount',
  components: { AddAccountModal },
  data () {
    return {
      UserBankTableColumns: unreactive(UserBankTableColumns),
      tableList: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info
    })
  },
  methods: {
    defaultCard (record) {
      if (+record.defaultCard === 1) return true
      return false
    },
    loadData (param) {
      return apiGetResearchBankList(param).then(res => {
        this.tableList = res || []
        return res
      })
    },
    handleAddBankAccount (e, item) {
      this.$refs.backRef.open(e, item)
    },
    openAddModal () {
      this.addModal.visible = true
    },
    refreshTableData () {
      this.$refs.table.refresh()
    },
    setAsDefault (record, done) {
      if (this.defaultCard(record)) return
      const params = {
        id: record.id,
        userId: this.userInfo.id
      }
      return apiSetResBankDefault(params).then(() => {
        this.$message.success(this.$t('all.autotext470'))
        this.refreshTableData()
      }).finally(done)
    },
    deleteBankAccount (record, done) {
      if (this.defaultCard(record)) return
      return delBank({ id: record.id }).then(() => {
        this.$message.success(this.$t('all.autotext470'))
        this.refreshTableData()
      }).finally(done)
    }
  }
}
</script>

<style scoped lang='less'>
.user-bank-account {
  border-radius: 8px;
  background-color: #fff;
  padding: 32px 20px;
  .user-bank-account--header {
    margin-bottom: 20px;
    .title {
      display: inline-block;
      width: 116px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #D9D9D9;
      border-radius: 2px 0 0 2px;
      &.en {
        width: auto;
        padding: 0 16px;
      }
    }
  }
  .btn--header {
    width: 116px;
  }
  .user-bank-account__table {
    margin: 20px 0;
    .ant-table {
      .ant-table-tbody {
        .table-action {
          .mgr-10 {
            margin-right: 12px;
          }
          .danger {
            color: #F02F2F;
          }
          .disabled {
            color: #999999;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>
